<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram Fig. 3.52</title>
</head>
<body>

<canvas id="circuitCanvas" width="500" height="420"></canvas>

<script>
const canvas = document.getElementById('circuitCanvas');
const ctx = canvas.getContext('2d');

// Style settings
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.font = '20px Times New Roman';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// --- Main Circuit Wires ---
const x1 = 100, y1 = 100;
const x2 = 400, y2 = 300;
const midX = (x1 + x2) / 2;

// Top wire parts
const capGap = 50;
const capX1 = midX - capGap / 2;
const capX2 = midX + capGap / 2;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(capX1, y1);
ctx.moveTo(capX2, y1);
ctx.lineTo(x2, y1);

// Right wire
ctx.lineTo(x2, y2);

// Bottom wire parts
const switchGapStart = x1 + 80;
const switchGapEnd = x1 + 170;
ctx.lineTo(switchGapEnd, y2); // Wire from right to switch
ctx.moveTo(switchGapStart, y2); // Move to other side of switch
ctx.lineTo(x1, y2); // Wire from switch to left

// Left wire parts
const resTopY = y1 + 60;
const resBottomY = y2 - 60;
ctx.lineTo(x1, resBottomY); // Wire from bottom-left to resistor
ctx.moveTo(x1, resTopY); // Move to top of resistor
ctx.lineTo(x1, y1); // Wire from resistor to top-left
ctx.stroke();


// --- Resistor (R) ---
ctx.beginPath();
const resX = x1;
const resW = 15; // half-width of zigzag
ctx.moveTo(resX, resTopY);
ctx.lineTo(resX + resW, resTopY + 1 * (resBottomY - resTopY) / 5);
ctx.lineTo(resX - resW, resTopY + 2 * (resBottomY - resTopY) / 5);
ctx.lineTo(resX + resW, resTopY + 3 * (resBottomY - resTopY) / 5);
ctx.lineTo(resX - resW, resTopY + 4 * (resBottomY - resTopY) / 5);
ctx.lineTo(resX, resBottomY);
ctx.stroke();

// Label R
ctx.font = 'italic 24px Times New Roman';
ctx.fillText('R', resX + 35, (resTopY + resBottomY) / 2);


// --- Capacitor ---
const capTopY = 40;
ctx.beginPath();
ctx.lineWidth = 3;
ctx.moveTo(capX1, y1);
ctx.lineTo(capX1, capTopY);
ctx.moveTo(capX2, y1);
ctx.lineTo(capX2, capTopY);
ctx.stroke();
ctx.lineWidth = 2; // Reset line width

// Label d (distance)
const d_y = y1 - 35;
const d_text_width = 12;
ctx.beginPath();
ctx.moveTo(capX1, d_y);
ctx.lineTo(midX - d_text_width / 2, d_y);
ctx.moveTo(midX + d_text_width / 2, d_y);
ctx.lineTo(capX2, d_y);
ctx.stroke();
ctx.font = 'italic 20px Times New Roman';
ctx.fillText('d', midX, d_y);

// Label r0 (radius)
const r0_x = capX2 + 20;
ctx.beginPath();
ctx.moveTo(r0_x, y1);
ctx.lineTo(r0_x, capTopY);
// Arrowheads
ctx.moveTo(r0_x, capTopY);
ctx.lineTo(r0_x - 5, capTopY + 8);
ctx.moveTo(r0_x, y1);
ctx.lineTo(r0_x - 5, y1 - 8);
ctx.stroke();
ctx.font = 'italic 20px Times New Roman';
ctx.fillText('r', r0_x + 10, (capTopY + y1) / 2 - 2);
ctx.font = '14px Times New Roman';
ctx.fillText('0', r0_x + 16, (capTopY + y1) / 2 + 5);


// --- Switch ---
ctx.font = '20px Times New Roman'; // Reset font
const switchPivotX = switchGapStart;
const switchPivotY = y2;
const switchTipX = switchGapEnd - 20;
const switchTipY = y2 - 25;
ctx.beginPath();
ctx.moveTo(switchPivotX, switchPivotY);
ctx.lineTo(switchTipX, switchTipY);
ctx.stroke();


// --- Arrow x ---
const arrowY = y2 + 40;
const arrowStartX = switchGapStart;
const arrowEndX = switchGapStart + 100;
ctx.beginPath();
ctx.moveTo(arrowStartX, arrowY);
ctx.lineTo(arrowEndX, arrowY);
// Arrowhead
ctx.moveTo(arrowEndX, arrowY);
ctx.lineTo(arrowEndX - 10, arrowY - 5);
ctx.moveTo(arrowEndX, arrowY);
ctx.lineTo(arrowEndX - 10, arrowY + 5);
ctx.stroke();
ctx.font = 'italic 24px Times New Roman';
ctx.fillText('x', arrowEndX + 20, arrowY);


// --- Figure Label ---
ctx.font = '20px Times New Roman';
ctx.fillText('Fig. 3.52', midX, y2 + 85);

</script>

</body>
</html>